<template>
  <div class="scene" ref="sceneDiv"></div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import gsap from "gsap"
import * as THREE from "three"

// 导入场景
import scene from "@/three/scene"
// 导入相机
import camera from "@/three/camera"
// 导入gui
import gui from "@/three/gui"
// 导入渲染器
import renderer from "@/three/renderer"
// 导入辅助轴
import axesHelper from "@/three/axesHelper"
// 导入控制器
import controls from "@/three/controls"
// 初始化-调整屏幕
import "@/three/init"
// 导入每一帧的执行函数
import animate from "@/three/animate"
// 导入添加物体屏幕
import createMesh from "@/three/createMesh"
import AlarmSprite from "@/three/mesh/AlarmSprite"
import LightWall from "@/three/mesh/LightWall"
import FlyLineShader from "@/three/mesh/FlyLineShader"
import LightRadar from "@/three/mesh/LightRadar"
import eventHub from '@/utils/eventBus'

const props = defineProps({
  event: {
    type: Array,
    required: true
  },
})
// 场景元素div
let sceneDiv = ref(null)
const eventListMesh = []

onMounted(() => {
sceneDiv.value.appendChild(renderer.domElement)
animate()
})
watch(
  () => props.event,
  (newValue) => {
    eventListMesh.forEach((item) => {
      item.remove()
    })
    newValue.forEach((item, index) => {
      const position = {
        x: item.position.x / 5 - 10,
        z: item.position.y / 5 - 10,
      }
      const alarmSprite = new AlarmSprite(item.name, position)
      alarmSprite.eventListIndex = index
      eventListMesh.push(alarmSprite)
      // 添加精灵图标记
      scene.add(alarmSprite.mesh)
      alarmSprite.onClick(() => {
        eventHub.emit("spriteClick", {event: item, index})
      })
      // 
      if(mapFn[item.name]) {
        mapFn[item.name](position, index)
      }
      // eventListMesh.forEach(item => {
      //   item.mesh.visible = true
      // })
    })
    console.log(newValue, '事件');
  }
)

let mapFn = {
  火警: (position, index) => {
    const lightWall = new LightWall(1, 2, position)
    lightWall.eventListIndex = index
    scene.add(lightWall.mesh)
    eventListMesh.push(lightWall)
  },
  治安: (position, index) => {
    // 生成随机颜色
    const color = new THREE.Color(
      Math.random(),
      Math.random(),
      Math.random(),
    ).getHex()
    const flyLineShader = new FlyLineShader(position, color)
    flyLineShader.eventListIndex = index
    scene.add(flyLineShader.mesh)
    eventListMesh.push(flyLineShader)
  },
  电力: (position, index) => {
    // 生成随机颜色
    const color = new THREE.Color(
      Math.random(),
      Math.random(),
      Math.random(),
    ).getHex()
    const lightRadar = new LightRadar(2, position, color)
    lightRadar.eventListIndex = index
    scene.add(lightRadar.mesh)
    eventListMesh.push(lightRadar)
  }
}
// 添加相机
scene.add(camera)
// 添加辅助坐标轴
scene.add(axesHelper)
// 创建物体
createMesh()

eventHub.on("eventToggle", (i) => {
  // 只显示点击目标
  eventListMesh.forEach(item => {
    if(item.eventListIndex === i) {
      item.mesh.visible = true
    } else {
      item.mesh.visible = false
    }
  })
  const position = {
    x: props.event[i].position.x / 5 - 10,
    y: -10,
    z: props.event[i].position.y / 5 - 10,
  }
  gsap.to(controls.target, {
    duration: 1,
    x: position.x,
    y: position.y,
    z: position.z,
  })
})

</script>

<style>
.scene {
  width: 100vh;
  height: 100vh;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
}
</style>